<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SIGN IN or SIGN UP</title>
    <style>
        /* 重置所有元素的内边距、外边距和盒模型为border-box */
        *,
        *::after,
        *::before {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        /* 设置页面背景颜色、字体颜色和背景图片 */
        body {
            color: #fff;
            /* 设置字体颜色为白色 */
            background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.fe2cb92a9809a66b8ea0b5046d1ed9aa?rik=%2fV8LlDUqV6ALpg&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1308%2f17%2fc2%2f24561028_1376699679461.jpg&ehk=B6h1WTUP7MXtzYqgUfEXmcFR2epNpUivg8Ev2udBFXA%3d&risl=&pid=ImgRaw&r=0);
            /* 设置背景图片 */
            background-repeat: no-repeat;
            /* 设置背景图片不重复 */
            background-size: cover;
            /* 设置背景图片覆盖整个页面 */
            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            /* 设置字体 */
        }

        /* 设置主要区域的样式 */
        main {
            width: 100%;
            /* 设置主要区域的宽度为100% */
            overflow: hidden;
            /* 隐藏主要区域的溢出内容 */
            min-height: 100vh;
            /* 设置主要区域的最小高度为视口高度 */
            padding: 2rem;
            /* 设置主要区域的内边距为2rem */
            display: flex;
            /* 将主要区域的子元素设置为flex布局 */
            align-items: center;
            /* 在主轴上居中对齐子元素 */
            justify-content: center;
            /* 在交叉轴上居中对齐子元素 */
        }



        /* 设置.box的样式 */
        .box {
            width: 100%;
            /* 设置.box的宽度为100% */
            max-width: 1020px;
            /* 设置.box的最大宽度为1020px */
            height: 640px;
            /* 设置.box的高度为640px */
            background-image: url(https://img.zcool.cn/community/01ff625e12cf12a80121651816523c.gif);
            /* 设置.box的背景图片 */
            background-repeat: no-repeat;
            /* 设置.box的背景图片不重复 */
            background-size: cover;
            /* 设置.box的背景图片覆盖整个区域 */
            position: relative;
            /* 设置.box的定位为相对定位 */
            border-radius: 3.3rem;
            /* 设置.box的圆角半径为3.3rem */
            box-shadow: 0 0 20px #b7b2a9;
            /* 设置.box的阴影效果 */
        }

        /* 设置.inner-box的样式 */
        .inner-box {
            position: absolute;
            /* 设置.inner-box的定位为绝对定位 */
            width: calc(100% - 4.1rem);
            /* 设置.inner-box的宽度为100%减去4.1rem */
            height: calc(100% - 4.1rem);
            /* 设置.inner-box的高度为100%减去4.1rem */
            top: 50%;
            /* 设置.inner-box的顶部距离为50% */
            left: 50%;
            /* 设置.inner-box的左侧距离为50% */
            transform: translate(-50%, -50%);
            /* 设置.inner-box的位置为居中 */
        }


        /* 设置.forms-wrap的样式 */
        .forms-wrap {
            position: absolute;
            /* 设置.forms-wrap的定位为绝对定位 */
            height: 100%;
            /* 设置.forms-wrap的高度为100% */
            width: 45%;
            /* 设置.forms-wrap的宽度为45% */
            left: 0;
            /* 设置.forms-wrap的左侧距离为0 */
            top: 0;
            /* 设置.forms-wrap的顶部距离为0 */
            display: grid;
            /* 将.forms-wrap的子元素设置为grid布局 */
            grid-template-columns: 1fr;
            /* 设置.forms-wrap的列数为1 */
            grid-template-rows: 1fr;
            /* 设置.forms-wrap的行数为1 */
            transition: 0.8s ease-in-out;
            /* 设置.forms-wrap的过渡效果 */
        }

        /* 设置form的样式 */
        form {
            max-width: 260px;
            /* 设置form的最大宽度为260px */
            width: 100%;
            /* 设置form的宽度为100% */
            margin: 0 auto;
            /* 设置form的水平居中 */
            height: 100%;
            /* 设置form的高度为100% */
            display: flex;
            /* 将form的子元素设置为flex布局 */
            flex-direction: column;
            /* 设置form的子元素在垂直方向上排列 */
            justify-content: space-evenly;
            /* 在form的子元素之间均匀分布空间 */
            grid-column: 1/2;
            /* 设置form的列为1到2 */
            grid-row: 1/2;
            /* 设置form的行为1到2 */
            transition: opacity 0.02s 0.4s;
            /* 设置form的过渡效果 */
        }

        /* 设置.sign-up-form的样式 */
        form.sign-up-form {
            opacity: 0;
            /* 设置.sign-up-form的透明度为0 */
            pointer-events: none;
            /* 禁用.sign-up-form的鼠标事件 */
        }



        /* 设置.logo的样式 */
        .logo {
            display: flex;
            /* 将.logo的子元素设置为flex布局 */
            align-items: center;
            /* 在.logo的子元素之间垂直居中 */
        }

        /* 设置.logo img的样式 */
        .logo img {
            height: 27px;
            /* 设置.logo img的高度为27px */
            margin-right: .3rem;
            /* 设置.logo img的右侧外边距为0.3rem */
        }

        /* 设置.logo h4的样式 */
        .logo h4 {
            font-size: 1.1rem;
            /* 设置.logo h4的字体大小为1.1rem */
            letter-spacing: 0.5px;
            /* 设置.logo h4的字母间距为0.5px */
            color: floralwhite;
            /* 设置.logo h4的字体颜色为#151111 */
        }


        /* 选择所有具有.heading类的元素下的h2元素 */
        .heading h2 {
            /* 设置字体大小为2.1rem */
            font-size: 2.1rem;
            /* 设置字体粗细为600 */
            font-weight: 600;
            /* 设置字体颜色为#151111 */
            color: aqua;
        }

        /* 选择所有具有.heading类的元素下的h6元素 */
        .heading h6 {
            /* 设置字体大小为0.75rem */
            font-size: 0.75rem;
            /* 设置字体粗细为400 */
            font-weight: 400;
            /* 将元素显示为行内元素 */
            display: inline;
            /* 设置字体颜色为#bababa */
            color: aqua;
        }

        /* 选择所有具有.toggle类的元素 */
        .toggle {
            /* 设置字体颜色为#bbb */
            color: white;
            /* 设置文本阴影 */
            text-shadow: 0 0 20px #bababa;
            /* 去除文本装饰 */
            text-decoration: none;
            /* 设置字体大小为0.75rem */
            font-size: 0.75rem;
            /* 设置字体粗细为500 */
            font-weight: 500;
            /* 设置过渡效果为0.3秒 */
            transition: .3s;
        }

        /* 当鼠标悬停在.toggle元素上时 */
        .toggle:hover {
            /* 设置字体颜色为#8371f6 */
            color: #8371f6;
        }


        /* 选择所有具有.input-wrap类的元素 */
        .input-wrap {
            /* 设置相对定位 */
            position: relative;
            /* 设置高度为37像素 */
            height: 37px;
            /* 设置下边距为2rem */
            margin-bottom: 2rem;
        }

        /* 选择所有具有.input-field类的元素 */
        .input-field {
            /* 设置绝对定位 */
            position: absolute;
            /* 设置宽度为100% */
            width: 100%;
            /* 设置高度为100% */
            height: 100%;
            /* 设置背景为透明 */
            background: none;
            /* 去除边框 */
            border: none;
            /* 去除外边框 */
            outline: none;
            /* 设置底部边框为1像素的实线，颜色为#bbb */
            border-bottom: 1px solid #bbb;
            /* 去除内边距 */
            padding: 0;
            /* 设置字体大小为0.95rem */
            font-size: 0.95rem;
            /* 设置字体颜色为#151111 */
            color: #151111;
            /* 设置过渡效果为0.4秒 */
            transition: 0.4s;
        }

        /* 选择所有label元素 */
        label {
            /* 设置绝对定位 */
            position: absolute;
            /* 设置左侧为0 */
            left: 0;
            /* 设置顶部为50% */
            top: 50%;
            /* 将元素向上移动50% */
            transform: translateY(-50%);
            /* 设置字体大小为0.95rem */
            font-size: 0.95rem;
            /* 设置字体颜色为#bbb */
            color: #bbb;
            /* 禁用指针事件 */
            pointer-events: none;
            /* 设置过渡效果为0.4秒 */
            transition: 0.4s;
        }

        /* 当输入框处于活动状态时 */
        .input-field:active {
            /* 设置底部边框颜色为#151111 */
            border-bottom-color: #151111;
        }

        /* 当输入框处于活动状态时，其后面的label元素 */
        .input-field.active+label {
            /* 设置字体大小为0.75rem */
            font-size: 0.75rem;
            /* 将元素向上移动2像素 */
            top: -2px;
        }


        /* 选择所有具有.sign-btn类的元素 */
        .sign-btn {
            /* 设置为内联块元素 */
            display: inline-block;
            /* 设置宽度为100% */
            width: 100%;
            /* 设置高度为43像素 */
            height: 43px;
            /* 设置背景颜色为#151111 */
            background: #b7b2a9;
            /* 设置字体颜色为白色 */
            color: #fff;
            /* 去除边框 */
            border: none;
            /* 设置光标为手型 */
            cursor: pointer;
            /* 设置圆角为0.8rem */
            border-radius: 0.8rem;
            /* 设置下边距为2rem */
            margin-bottom: 2rem;
            /* 设置过渡效果为0.3秒 */
            transition: 0.3s;
        }


        /* 当鼠标悬停在.sign-btn元素上时 */
        .sign-btn:hover {
            /* 设置背景颜色为#8371f6 */
            background-color: #8371f6;
        }

        /* 选择所有具有.text类的元素 */
        .text {
            /* 设置为弹性盒子 */
            display: flex;
            /* 设置字体颜色为白色 */
            color: white;
            /* 设置文本阴影 */
            text-shadow: 0 0 20px #b7b2a9;
            /* 设置字体大小为0.7rem */
            font-size: 0.7rem;
        }

        /* 选择所有.text元素内的a元素 */
        .text a {
            /* 设置字体颜色为#bbb */
            color: #bbb;
            /* 设置过渡效果为0.3秒 */
            transition: 0.3s;
        }

        /* 当鼠标悬停在.text元素内的a元素上时 */
        .text a:hover {
            /* 设置字体颜色为#8371f6 */
            color: #8371f6;
        }


        /* 当处于注册模式下的登录表单 */
        main.sign-up-mode form.sign-in-form {
            /* 设置透明度为0 */
            opacity: 0;
            /* 禁用指针事件 */
            pointer-events: none
        }

        /* 当处于注册模式下的注册表单 */
        main.sign-up-mode form.sign-up-form {
            /* 设置透明度为1 */
            opacity: 1;
            /* 启用指针事件 */
            pointer-events: all
        }

        /* 当处于注册模式下的表单容器 */
        main.sign-up-mode .forms-wrap {
            /* 设置左侧位置为55% */
            left: 55%;
        }

        /* 当处于注册模式下的轮播容器 */
        main.sign-up-mode .carousel {
            /* 设置左侧位置为0% */
            left: 0%;
        }

        /* 选择所有.carousel元素 */
        .carousel {
            /* 设置圆角为2rem */
            border-radius: 2rem;
            /* 设置内边距为2rem */
            padding: 2rem;
            /* 设置为绝对定位 */
            position: absolute;
            /* 设置溢出隐藏 */
            overflow: hidden;
            /* 设置高度为100% */
            height: 100%;
            /* 设置宽度为55% */
            width: 55%;
            /* 设置左侧位置为45% */
            left: 45%;
            /* 设置顶部位置为0 */
            top: 0;
            /* 设置阴影效果 */
            box-shadow: 0 0 5px #b7b2a9;
            /* 设置背景颜色为透明 */
            background-color: transparent;
            /* 设置为网格布局 */
            display: grid;
            /* 设置过渡效果为0.8秒 */
            transition: 0.8s ease-in-out;
            /* 设置为相对定位 */
            position: relative;
            /* 设置网格行模板 */
            grid-template-rows: auto 1fr;
        }


        /* 选择所有.images-wrapper元素 */
        .images-wrapper {
            /* 设置为网格布局 */
            display: grid;
            /* 设置网格列模板 */
            grid-template-columns: 2fr;
            /* 设置网格行模板 */
            grid-template-rows: 1fr;
        }

        /* 选择所有.image元素 */
        .image {
            /* 设置宽度为100% */
            width: 100%;
            /* 设置网格列为1到2 */
            grid-column: 1/2;
            /* 设置网格行为1到2 */
            grid-row: 1/2;
            /* 设置透明度为0 */
            opacity: 0;
            /* 设置过渡效果 */
            transition: opacity 0.3s, transform 0.5s;
        }

        /* 选择所有.img-1元素 */
        .img-1 {
            /* 设置向上平移50像素 */
            transform: translate(0, -50px);
        }

        /* 选择所有.img-2元素 */
        .img-2 {
            /* 设置水平和垂直缩放 */
            transform: scale(0.4, 0.5);
        }

        /* 选择所有.img-3元素 */
        .img-3 {
            /* 设置缩放和旋转 */
            transform: scale(0.3), rotate((-20deg));
        }

        /* 选择所有具有.show类的.image元素 */
        .image.show {
            /* 设置透明度为1 */
            opacity: 1;
            /* 取消所有变换效果 */
            transform: none;
        }


        /* 选择所有.text-slider元素 */
        .text-slider {
            /* 设置为flex布局 */
            display: flex;
            /* 垂直居中 */
            align-items: center;
            /* 水平居中 */
            justify-content: center;
            /* 设置主轴方向为垂直 */
            flex-direction: column;
        }

        /* 选择所有.text-wrap元素 */
        .text-wrap {
            /* 设置最大高度为2.2rem */
            max-height: 2.2rem;
            /* 超出部分隐藏 */
            overflow: hidden;
            /* 底部外边距为2.5rem */
            margin-bottom: 2.5rem;
        }

        /* 选择所有.text-group元素 */
        .text-group {
            /* 设置为flex布局 */
            display: flex;
            /* 设置主轴方向为垂直 */
            flex-direction: column;
            /* 文本居中 */
            text-align: center;
            /* 初始位置为不偏移 */
            transform: translateY(0);
            /* 过渡效果为0.5秒 */
            transition: 0.5s;
        }

        /* 选择所有.text-group元素下的h2元素 */
        .text-group h2 {
            /* 设置行高为2.2rem */
            line-height: 2.2rem;
            /* 设置字体粗细为600 */
            font-weight: 600;
            /* 设置字体大小为1.6rem */
            font-size: 1.6rem;
        }


        /* 选择所有.bullets元素 */
        .bullets {
            /* 顶部外边距为20px */
            margin-top: 20px;
            /* 设置为flex布局 */
            display: flex;
            /* 垂直居中 */
            align-items: center;
            /* 水平居中 */
            justify-content: center;
        }

        /* 选择所有.bullets元素下的span元素 */
        .bullets span {
            /* 设置为块级元素 */
            display: block;
            /* 宽度为0.5rem */
            width: 0.5rem;
            /* 高度为0.5rem */
            height: 0.5rem;
            /* 圆角为0.2rem */
            border-radius: 0.2rem;
            /* 背景颜色为白色 */
            background-color: white;
            /* 设置阴影 */
            box-shadow: 20px #b7b2a9;
            /* 左右外边距为0.25rem */
            margin: 0 0.25rem;
            /* 鼠标指针为手型 */
            cursor: pointer;
            /* 过渡效果为0.3秒 */
            transition: .3s;
        }

        /* 选择所有.bullets元素下的.active元素 */
        .bullets span.active {
            /* 宽度为1.1rem */
            width: 1.1rem;
            /* 背景颜色为aqua */
            background-color: aqua;
            /* 圆角为1rem */
            border-radius: 1rem;
        }


        /* 当屏幕宽度小于等于850px时生效 */
        @media (max-width:850px) {

            /* 选择所有.box元素 */
            .box {
                /* 高度自适应 */
                height: auto;
                /* 最大宽度为550px */
                max-width: 550px;
                /* 溢出隐藏 */
                overflow: hidden;
            }

            /* 选择所有.inner-box元素 */
            .inner-box {
                /* 位置为默认值 */
                position: static;
                /* 变换为默认值 */
                transform: none;
                /* 宽度为默认值 */
                width: revert;
                /* 高度为默认值 */
                height: revert;
                /* 上下左右内边距为2rem */
                padding: 2rem;
            }

            /* 选择所有.forms-wrap元素 */
            .forms-wrap {
                /* 位置为默认值 */
                position: revert;
                /* 宽度为100% */
                width: 100%;
                /* 高度为100% */
                height: 100%;
            }

            /* 选择所有.form元素 */
            .form {
                /* 最大宽度为默认值 */
                max-width: revert;
                /* 上内边距为1.5rem，左右内边距为2.5rem，下内边距为2rem */
                padding: 1.5rem 2.5rem 2rem;
                /* 过渡效果为0.8秒，缓动函数为ease-in-out，透明度过渡效果为线性 */
                transition: transform 0.8s ease-in-out, opacity 0.4s linear;
            }

            /* 选择所有.heading元素 */
            .heading {
                /* 上下外边距为2rem，左右外边距为0 */
                margin: 2rem 0;
            }

            /* 选择所有.sign-up-form元素 */
            form.sign-up-form {
                /* 向右偏移100% */
                transform: translateX(100%);
            }

            /* 选择所有.sign-up-mode元素下的.sign-in-form元素 */
            main.sign-up-mode form.sign-in-form {
                /* 向左偏移100% */
                transform: translateX(-100%);
            }

            /* 选择所有.sign-up-mode元素下的.sign-up-form元素 */
            main.sign-up-mode form.sign-up-form {
                /* 不偏移 */
                transform: translateX(0%);
            }

            /* 选择所有.carousel元素 */
            .carousel {
                /* 位置为默认值 */
                position: revert;
                /* 高度自适应 */
                height: auto;
                /* 宽度为100% */
                width: 100%;
                /* 上下内边距为3rem，左右内边距为2rem */
                padding: 3rem 2rem;
                /* 设置为flex布局 */
                display: flex;
            }

            /* 选择所有.images-wrapper元素 */
            .images-wrapper {
                /* 隐藏 */
                display: none;
            }

            /* 选择所有.text-slider元素 */
            .text-slider {
                /* 宽度为100% */
                width: 100%;
            }
        }


        /* 当屏幕宽度小于等于530px时生效 */
        @media (max-width:530px) {

            /* 选择所有main元素 */
            main {
                /* 上下左右内边距为1rem */
                padding: 1rem;
            }

            /* 选择所有.box元素 */
            .box {
                /* 边框半径为2rem */
                border-radius: 2rem;
            }

            /* 选择所有.inner-box元素 */
            .inner-box {
                /* 上下左右内边距为1rem */
                padding: 1rem;
            }

            /* 选择所有.carousel元素 */
            .carousel {
                /* 上下内边距为1.5rem，左右内边距为1rem */
                padding: 1.5rem 1rem;
                /* 边框半径为1.6rem */
                border-radius: 1.6rem;
            }

            /* 选择所有.text-wrap元素 */
            .text-wrap {
                /* 下外边距为1rem */
                margin-bottom: 1rem;
            }

            /* 选择所有.text-group元素下的h2元素 */
            .text-group h2 {
                /* 字体大小为1.2rem */
                font-size: 1.2rem;
            }

            /* 选择所有form元素 */
            form {
                /* 上内边距为1rem，左右内边距为2rem，下内边距为1.5rem */
                padding: 1rem 2rem 1.5rem;
            }
        }
    </style>
</head>

<body>
    <!-- 这是一个包含登录和注册表单的主要区域 -->
    <main>
        <!-- 包含登录和注册表单的容器 -->
        <div class="box">
            <!-- 包含登录和注册表单的内部容器 -->
            <div class="inner-box">
                <!-- 包含登录和注册表单的表单容器 -->
                <div class="forms-wrap">
                    <!-- 登录表单 -->
                    <form action="index.html" autocomplete="off" class="sign-in-form">
                        <!-- 包含网站logo的容器 -->
                        <div class="logo">
                            <h4>前端学习</h4>
                        </div>
                        <!-- 包含标题和切换注册表单的链接的容器 -->
                        <div class="heading">
                            <h2>欢迎回来</h2>
                            <h6>Not registered yet?</h6>
                            <a href="#" class="toggle">Sign up</a>
                        </div>
                        <!-- 包含输入字段和提交按钮的容器 -->
                        <div class="actual-form">
                            <!-- 包含用户名输入字段的容器 -->
                            <div class="input-wrap">
                                <input id="name" type="text" minlength="4" autocomplete="off" required
                                    class="input-field">
                                <label for="name">Name</label>
                            </div>
                            <!-- 包含密码输入字段的容器 -->
                            <div class="input-wrap">
                                <input id="password" type="password" autocomplete="off" required class="input-field">
                                <label for="password">Password</label>
                            </div>
                            <!-- 登录表单的提交按钮 -->
                            <input type="submit" value="SIGN IN" class="sign-btn">
                            <!-- 忘记密码的链接 -->
                            <p class="text">忘记密码?
                                <a href="#">获取帮助</a>
                            </p>
                        </div>
                    </form>
                    <!-- 注册表单 -->
                    <form action="index.html" autocomplete="off" class="sign-up-form">
                        <!-- 包含网站logo的容器 -->
                        <div class="logo">
                            <!-- <img src="" alt=""> -->
                            <h4>前端学习</h4>
                        </div>
                        <!-- 包含标题和切换登录表单的链接的容器 -->
                        <div class="heading">
                            <h2>注册</h2>
                            <h6>Already have an account?</h6>
                            <a href="#" class="toggle">Sign In</a>
                        </div>
                        <!-- 包含输入字段和提交按钮的容器 -->
                        <div class="actual-form">
                            <!-- 包含用户名输入字段的容器 -->
                            <div class="input-wrap">
                                <input id="sign-name" type="text" minlength="4" autocomplete="off" required
                                    class="input-field">
                                <label for="sign-name">Name</label>
                            </div>
                            <!-- 包含电子邮件输入字段的容器 -->
                            <div class="input-wrap">
                                <input id="sign-email" type="email" autocomplete="off" required class="input-field">
                                <label for="sign-email">Email</label>
                            </div>
                            <!-- 包含密码输入字段的容器 -->
                            <div class="input-wrap">
                                <input id="sign-password" type="password" autocomplete="off" required
                                    class="input-field">
                                <label for="sign-password">Password</label>
                            </div>
                            <!-- 注册表单的提交按钮 -->
                            <input type="submit" value="SIGN UP" class="sign-btn">
                            <!-- 同意服务条款和隐私协议的复选框 -->
                            <p class="text"> <input type="checkbox" name="" id="">注册前我已阅读并同意
                                <a href="#">服务条款</a>和<a href="#">隐私协议</a>
                            </p>
                        </div>
                    </form>
                </div>
                <!-- 包含轮播图的容器 -->
                <div class="carousel">
                    <!-- 包含轮播图图片的容器 -->
                    <div class="images-wrapper">
                        <img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/68ff62863bb9fd90d6fd874802e08568.mp4.jpg"
                            class="image img-1 show" alt="">
                        <img src="https://wallpaper-static.cheetahfun.com/wallpaper/sites/scifi/pic5.jpg" alt=""
                            class="image img-2">
                        <img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/8bc682fba0a8747155409b3bbc2676ac.mp4.jpg"
                            alt="" class="image img-3">
                    </div>
                    <!-- 包含轮播图文本和轮播图指示器的容器 -->
                    <div class="text-slider">
                        <!-- 包含轮播图文本的容器 -->
                        <div class="text-wrap">
                            <div class="text-group">
                                <h2>开始你的学习旅程</h2>
                                <h2>准备创造奇迹吧</h2>
                                <h2>学习是一切创建力的开始</h2>
                            </div>
                        </div>
                        <!-- 包含轮播图指示器的容器 -->
                        <div class="bullets">
                            <span class="active" data-value="1"></span>
                            <span data-value="2"></span>
                            <span data-value="3"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <script>
        // 获取页面中所有的输入框元素
        const inputs = document.querySelectorAll('.input-field')
        // 获取页面中所有的切换按钮元素
        const toggle_btn = document.querySelectorAll('.toggle')
        // 获取页面中的main元素
        const main = document.querySelector('main')
        // 获取页面中所有的小圆点元素
        const bullets = document.querySelectorAll('.bullets span')
        // 获取页面中所有的图片元素
        const images = document.querySelectorAll('.image')

        // 为所有输入框元素添加获取焦点和失去焦点的事件监听器
        inputs.forEach(inp => {
            inp.addEventListener('focus', () => {
                inp.classList.add('active')
            })
            inp.addEventListener('blur', () => {
                if (inp.value != '') return
                inp.classList.remove('active')
            })
        })

        // 为所有切换按钮元素添加点击事件监听器
        toggle_btn.forEach(btn => {
            btn.addEventListener('click', () => {
                main.classList.toggle('sign-up-mode')
            })
        })

        // 定义moveSlider函数，用于实现图片轮播和文本滑动的效果
        function moveSlider() {
            // 获取当前点击的小圆点的索引值
            let index = this.dataset.value;
            // 根据索引值获取对应的图片元素
            let currentImg = document.querySelector(`.img-${index}`)
            // 将其他图片元素的show类名移除，将当前图片元素添加show类名
            images.forEach(img => {
                img.classList.remove('show')
            })
            currentImg.classList.add('show')
            // 获取文本滑动元素
            const textSlider = document.querySelector('.text-group')
            // 将文本滑动元素的transform属性设置为当前索引值对应的位置
            textSlider.style.transform = `translateY(${-(index - 1) * 2.2}rem)`
            // 将其他小圆点的active类名移除，将当前小圆点添加active类名
            bullets.forEach(bullet => {
                bullet.classList.remove('active')
            })
            this.classList.add('active')
        }

        // 为所有小圆点元素添加点击事件监听器
        bullets.forEach(bullet => {
            bullet.addEventListener('click', moveSlider)
        })

    </script>
</body>

</html>